<template>
  <div>

    <!-- 可以改成Item groups -->
    <v-tabs v-model="tab" grow>

      <v-tabs-slider></v-tabs-slider>

      <!-- :href="'#tab-' + i" -->
      <v-tab v-for="(item,index) in tabs" :key="index" @click="getList(index)">{{item.text}} {{item.count}}</v-tab>

    </v-tabs>


    <!-- <v-item-group>
      <v-container>
        <v-row>
          <v-col v-for="(item,index) in tabs" :key="index">

            <v-item v-slot:default="{ active, toggle }">

              <v-card :color="active ? 'primary' : ''" class="align-center" dark  @click="toggle">
                <v-scroll-y-transition>
                  <div v-if="!active" class="flex-grow-1 text-center">{{item.text}}</div>
                  <div v-if="active" class="flex-grow-1 text-center">{{item.text}}</div>
                </v-scroll-y-transition>
              </v-card>

            </v-item>

          </v-col>
        </v-row>
      </v-container>
    </v-item-group> -->





  </div>
</template>

<script>
  export default {
    data() {
      return {
        tab: null,

        tabs: [{
          text: "今日到期",
        }, {
          text: "即将到期",
        }, {
          text: "已到期",
        }],

      }
    },
    methods: {
      getList(index) {

      }

    }
  }

</script>

<style scoped>
  .v-application--is-ltr .v-tabs-bar.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows)>.v-slide-group__wrapper>.v-tabs-bar__content>.v-tab:first-child,
  .v-application--is-ltr .v-tabs-bar.v-tabs-bar--is-mobile:not(.v-tabs-bar--show-arrows)>.v-slide-group__wrapper>.v-tabs-bar__content>.v-tabs-slider-wrapper+.v-tab {
    margin-left: 0 !important;
  }

  .col{
    padding: 5px;
  }

  .v-tab{
    padding:0
  }
</style>
